<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title>Remote Desktop Web</title>

<link rel="stylesheet" href="/menu.css" type="text/css" media="screen" />
<script type="text/javascript" src="/menu_prototype.js"></script>
<script type="text/javascript" src="/menu.js"></script>

<style type="text/css">
body
{
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
}

div#topArea
{
	margin-bottom: 15px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-right: 20px;
	background: #000000;
	color: #ffffff;
	font-family: sans-serif;
	font-size: 10pt;
}

a:link, a:visited
{
	color: #ffffff;
}
</style>

<script type="text/javascript">
function getAdjustedX()
{
	var realX = mouseX - document.images['screenshot'].offsetLeft;
	return realX;
}

function getAdjustedY()
{
	var realY = mouseY - document.images['screenshot'].offsetTop;
	return realY;
}

function callRPC(url)
{
	var xmlhttp =  new XMLHttpRequest();
	xmlhttp.open('GET', url, true);
	xmlhttp.send(null);
}

function shutdown()
{
	var shutdownFlag = confirm('Are you sure you want to shutdown the remote RDW host? You may not be able to restart it remotely.');
	if (shutdownFlag)
	{
		callRPC('/shutdown');
	}
}

function reloadImage()
{
   document.images.screenshot.src = '/screenshot?' + Date();
}

setInterval('reloadImage()', 30000); // 30 seconds

document.observe('dom:loaded', function()
{
	var myMenuItems = [
	  {
	    name: 'Left Click',
	    callback: function() {
	      callRPC('/click?button=left&click=single&x=' + getAdjustedX() + '&y=' + getAdjustedY());
	      setTimeout('reloadImage()', 500);
	    }
	  },{
	    name: 'Right Click',
	    callback: function() {
	      callRPC('/click?button=right&click=single&x=' + getAdjustedX() + '&y=' + getAdjustedY());
	      setTimeout('reloadImage()', 500);
	    }
	  },{
	    name: 'Double Left Click',
	    callback: function() {
	      callRPC('/click?button=left&click=double&x=' + getAdjustedX() + '&y=' + getAdjustedY());
	      setTimeout('reloadImage()', 500);
	    }
	  },{
	    name: 'Scroll Up',
	    callback: function() {
	      callRPC('/scrollup');
	      setTimeout('reloadImage()', 500);
	    }
	  },{
	    name: 'Scroll Down',
	    callback: function() {
	      callRPC('/scrolldown');
	      setTimeout('reloadImage()', 500);
	    }
	  },{
	    separator: true
	  },{
	    name: 'Send Text at Cursor',
	    callback: function() {
	      var text = prompt('Enter text. Use escape sequences (\\b=backspace, \\n=newline, \\t=tab)');
	      callRPC('/text?' + text);
	      setTimeout('reloadImage()', 600);
	    }
	  },{
	    separator: true
	  },{
	    name: 'Reload Screen',
	    callback: function() {
	      reloadImage();
	    }
	  },{
	    name: 'Shutdown RDW Server on Host',
	    callback: function() {
	      shutdown();
	    }
	  }
	]

	new Proto.Menu({
	  selector: '#contextArea', // context menu will be shown when element with id of "contextArea" is clicked
	  className: 'menu desktop', // this is a class which will be attached to menu container (used for css styling)
	  menuItems: myMenuItems // array of menu items
	})
})
</script>
</head>
<body>
<div id="topArea">Right click to operate mouse and keyboard | <a href="javascript:shutdown();">Shutdown RDW Host</a> | <a href="http://rdw.googlecode.com/">RDW Home</a></div>
<div id="contextArea"><img name="screenshot" border=1 src="/screenshot" /></div>

<body>
</html>
